<template>
	<div style="margin-top: 50px">
		<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
			<el-form-item label="商品分类：" prop="productCategoryId">
				<el-cascader v-model="selectProductCateValue" :options="productCateOptions">
				</el-cascader>
			</el-form-item>
			<el-form-item label="商品名称：" prop="name">
				<el-input v-model="value.name"></el-input>
			</el-form-item>
			<el-form-item label="副标题：" prop="subTitle">
				<el-input v-model="value.subTitle"></el-input>
			</el-form-item>
			<el-form-item label="商品品牌：" prop="brandId">
				<el-select v-model="value.brandId" @change="handleBrandChange" placeholder="请选择品牌">
					<el-option v-for="item in brandOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品介绍：">
				<el-input :autoSize="true" v-model="value.description" type="textarea" placeholder="请输入内容"></el-input>
			</el-form-item>
			<el-form-item label="商品货号：">
				<el-input style="width:80%;" v-model="value.productSn"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="dialogVisibleClick">筋斗云</el-button>
			</el-form-item>
			<el-form-item label="商品售价：">
				<el-input v-model="value.price"></el-input>
			</el-form-item>
			<el-form-item label="市场价：">
				<el-input v-model="value.originalPrice"></el-input>
			</el-form-item>
			<el-form-item label="商品库存：" style="display: none;">
				<el-input v-model="value.stock=1000000000"></el-input>
			</el-form-item>
			<el-form-item label="计量单位：">
				<el-input v-model="value.unit"></el-input>
			</el-form-item>
			<el-form-item label="商品重量：">
				<el-input v-model="value.weight" style="width: 300px"></el-input>
				<span style="margin-left: 20px">克</span>
			</el-form-item>
			<el-form-item label="排序">
				<el-input v-model="value.sort"></el-input>
			</el-form-item>
			<el-form-item style="text-align: center">
				<el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
			</el-form-item>
		</el-form>


		<el-dialog title="选择商品" :visible.sync="dialogVisible" :before-close="handleClose" width="1000px" top="10vh">

			<div style="display: flex;">
				<el-tree ref="tree" :data="data" icon-class="el-icon-folder-opened" @default-checked-keys="treeFilterArray" :props="defaultProps"
				 @node-click="handleNodeClick" node-key="id" :highlight-current="true"  style="margin-right: 20px;width:25%;height:400px;overflow:scroll"></el-tree>
				<div style="width:75%;">

					<el-table ref="filterTable" :data="tableData" @row-click="tableRowClick" style="width: 100%" height="400">
						<el-table-column label="商品编号" width="180">
							<template slot-scope="scope">
								 <el-radio v-model="choiceData.productNumber" :label="scope.row.productNumber"></el-radio>
							</template>
							
						</el-table-column>
						<el-table-column label="图片" width="180">

							<template slot-scope="scope">
								<img style="width:100px" v-if="scope.row.multiImg.length!=0" :src="scope.row.multiImg[0].url" />
								<img v-else />
							</template>
						</el-table-column>

						<el-table-column prop="productName" label="商品名称" width="180">
						</el-table-column>
						<el-table-column prop="spec" label="规格型号" width="180">
						</el-table-column>
						<el-table-column prop="categoryName" label="商品类别" width="180">
						</el-table-column>
						<el-table-column prop="unitName" label="单位">
						</el-table-column>
						<el-table-column prop="remark" label="备注">
						</el-table-column>
					</el-table>

				</div>

			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisibleTableClick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		fetchListWithChildren
	} from '@/api/productCate'
	import {
		fetchList as fetchBrandList
	} from '@/api/brand'
	import {
		getProduct
	} from '@/api/product';
	import {
		product as jdyProduct,
		productCategory as jdyProductCategory,
	} from '@/api/jdy';
	export default {
		name: "ProductInfoDetail",
		props: {
			value: Object,
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 10,
				},
				dialogVisible: false,
				hasEditCreated: false,
				//选中商品分类的值
				selectProductCateValue: [],
				productCateOptions: [],
				brandOptions: [],
				rules: {
					name: [{
							required: true,
							message: '请输入商品名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 140,
							message: '长度在 2 到 140 个字符',
							trigger: 'blur'
						}
					],
					subTitle: [{
						required: true,
						message: '请输入商品副标题',
						trigger: 'blur'
					}],
					productCategoryId: [{
						required: true,
						message: '请选择商品分类',
						trigger: 'blur'
					}],
					brandId: [{
						required: true,
						message: '请选择商品品牌',
						trigger: 'blur'
					}],
					description: [{
						required: true,
						message: '请输入商品介绍',
						trigger: 'blur'
					}],
					requiredProp: [{
						required: true,
						message: '该项为必填项',
						trigger: 'blur'
					}]
				},
				tableData: [],
				data: [],
				defaultProps: {
					label: 'name'
				},
				treeFilterArray: {},
				total: 0,
				tableEventTF:true,
				getListTF:true,
				choiceData:0,
				waitFor:true,
			};
		},
		created() {

			this.getProductCateList();
			this.getBrandList();

			jdyProductCategory().then(res => {
				this.tree(res.data, 0)

			})


		},
		computed: {
			//商品的编号
			productId() {
				return this.value.id;
			}
		},
		watch: {
			productId: function(newValue) {
				if (!this.isEdit) return;
				if (this.hasEditCreated) return;
				if (newValue === undefined || newValue == null || newValue === 0) return;
				this.handleEditCreated();
			},
			selectProductCateValue: function(newValue) {
				if (newValue != null && newValue.length === 2) {
					this.value.productCategoryId = newValue[1];
					this.value.productCategoryName = this.getCateNameById(this.value.productCategoryId);
				} else {
					this.value.productCategoryId = null;
					this.value.productCategoryName = null;
				}
			}
		},
		methods: {
			tableRowClick(row){
				this.choiceData=row
			},
			dialogVisibleTableClick(){
				if(this.choiceData!=null){
					this.value.productSn=this.choiceData.productNumber
					this.value.invSku=this.choiceData.invSku
					this.dialogVisible = false
				}
			},
			getList() {
				if (this.treeFilterArray != null && this.treeFilterArray != '') {
					jdyProduct(this.treeFilterArray.id, this.listQuery.pageNum, this.listQuery.pageSize, null).then(res => {
						if(res.data.code==0){
							this.getListTF=true;
							let arr=[]
							arr=this.tableData.concat(res.data.items)
							this.tableData=arr;
							if(this.tableEventTF){
								this.tableEvent();
								this.tableEventTF=false;
							}
							this.waitFor=true;
						}else{
							this.getListTF=false;
						}
						
					})
				}
			},
			tableEvent() {

				let dom = this.$refs.filterTable.bodyWrapper
				dom.addEventListener('scroll', () => {
					// 滚动距离
					let scrollTop = dom.scrollTop
					// 变量windowHeight是可视区的高度
					let windowHeight = dom.clientHeight || dom.clientHeight
					// 变量scrollHeight是滚动条的总高度
					let scrollHeight = dom.scrollHeight || dom.scrollHeight
					if(this.waitFor){	//等待休眠
						if (scrollTop + windowHeight >= scrollHeight/2) {
							// 获取到的不是全部数据 当滚动到底部 继续获取新的数据
							if(this.getListTF){
								this.waitFor=false;
								this.listQuery.pageNum++;
								this.getList()
							}
						}
					}
					
				})
			},
			handleNodeClick(data) {
				if(data.children.length==0){
					this.treeFilterArray=data
					this.listQuery.pageNum=1;
					this.tableData=[];
					this.getListTF=true;
					this.getList();

				}
			},
			dialogVisibleClick() {
				this.dialogVisible = true;
				this.tableData=[];
				this.listQuery.pageNum=1;
				this.getList();
			},

			tree(list, parId) {
				this.$worker.run((list, parId) => {
					let t = true;
					let treeFilterArray = null;

					function loop(parId) {
						let array = [];
						for (let i = 0; i < list.length; i++) {
							if (list[i].parentId == parId) {
								let data = loop(list[i].id);
								if (t) {
									if (data.length != 0) {
										treeFilterArray = data[0]
										t = false
									}
								}
								list[i].children = data
								array.push(list[i])
							}
						}
						return array;
					}
					return [loop(0), treeFilterArray];
				}, [list, parId]).then(res => {
					this.data = res[0];
					this.treeFilterArray = res[1]

				})
			},
			handleClose(done) {
				done();

			},
			//处理编辑逻辑
			handleEditCreated() {
				if (this.value.productCategoryId != null) {
					this.selectProductCateValue.push(this.value.cateParentId);
					this.selectProductCateValue.push(this.value.productCategoryId);
				}
				this.hasEditCreated = true;
			},
			getProductCateList() {
				fetchListWithChildren().then(response => {
					let list = response.data;
					this.productCateOptions = [];
					for (let i = 0; i < list.length; i++) {
						let children = [];
						if (list[i].children != null && list[i].children.length > 0) {
							for (let j = 0; j < list[i].children.length; j++) {
								children.push({
									label: list[i].children[j].name,
									value: list[i].children[j].id
								});
							}
						}
						this.productCateOptions.push({
							label: list[i].name,
							value: list[i].id,
							children: children
						});
					}
				});
			},
			getBrandList() {
				fetchBrandList({
					pageNum: 1,
					pageSize: 100
				}).then(response => {
					this.brandOptions = [];
					let brandList = response.data.list;
					for (let i = 0; i < brandList.length; i++) {
						this.brandOptions.push({
							label: brandList[i].name,
							value: brandList[i].id
						});
					}
				});
			},
			getCateNameById(id) {
				let name = null;
				for (let i = 0; i < this.productCateOptions.length; i++) {
					for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
						if (this.productCateOptions[i].children[j].value === id) {
							name = this.productCateOptions[i].children[j].label;
							return name;
						}
					}
				}
				return name;
			},
			handleNext(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$emit('nextStep');
					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			handleBrandChange(val) {
				let brandName = '';
				for (let i = 0; i < this.brandOptions.length; i++) {
					if (this.brandOptions[i].value === val) {
						brandName = this.brandOptions[i].label;
						break;
					}
				}
				this.value.brandName = brandName;
			}
		}
	}
</script>

<style scoped>
</style>
